<template>
  <div class="person-container">
    <el-card class="person-card">
      <!-- 头像上传区域 -->
      <div class="avatar-container">
        <el-upload
          :show-file-list="false"
          class="avatar-uploader"
          action="http://localhost:9090/files/upload"
          :on-success="handleFileUpload"
        >
          <img v-if="data.user.avatar" :src="data.user.avatar" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <p class="avatar-tip">点击更换头像</p>
      </div>

      <!-- 表单区域 -->
      <el-form :model="data.user" label-width="120px" class="person-form">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="账号" class="form-item">
              <el-input disabled v-model="data.user.username" autocomplete="off" class="form-input" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="名称" class="form-item">
              <el-input v-model="data.user.name" autocomplete="off" class="form-input" />
            </el-form-item>
          </el-col>

          <div v-if="data.user.role === 'USER'">
            <el-col :span="24">
              <el-form-item label="性别" prop="sex" class="form-item">
                <el-radio-group v-model="data.user.sex" class="radio-group">
                  <el-radio label="男" class="radio-item"></el-radio>
                  <el-radio label="女" class="radio-item"></el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="电话" prop="phone" class="form-item">
                <el-input v-model="data.user.phone" autocomplete="off" class="form-input" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="邮箱" prop="email" class="form-item">
                <el-input v-model="data.user.email" autocomplete="off" class="form-input" />
              </el-form-item>
            </el-col>
          </div>
        </el-row>

        <!-- 按钮区域 -->
        <div class="button-group">
          <el-button type="primary" @click="save" class="save-button">保存修改</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {reactive} from "vue"
import request from "@/utils/request";
import {ElMessage} from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
})

const handleFileUpload = (file) => {
  data.user.avatar = file.data
}


const emit = defineEmits(["updateUser"])
// 把当前修改的用户信息存储到后台数据库
const save = () => {
  if (data.user.role === 'ADMIN') {
    request.put('/admin/update', data.user).then(res => {
      if (res.code === '200') {
        ElMessage.success('更新成功')
        //把更新后的用户信息存储到缓存
        localStorage.setItem('system-user', JSON.stringify(data.user))
        emit('updateUser')
      } else {
        ElMessage.error(res.msg)
      }
    })
  } else {
    request.put('/user/update', data.user).then(res => {
      if (res.code === '200') {
        ElMessage.success('更新成功')
        //把更新后的用户信息存储到缓存
        localStorage.setItem('system-user', JSON.stringify(data.user))
        emit('updateUser')
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
}
</script>

<style scoped lang="scss">
.person-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background-image: url('@/assets/imgs/个人信息背景图.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.person-card {
  width: 100%;
  max-width: 600px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  border: none;
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 30px 0;
}

.avatar-uploader {
  border-radius: 50%;
  overflow: hidden;
  transition: all 0.3s ease;
}

.avatar-uploader:hover {
  transform: scale(1.03);
  box-shadow: 0 5px 15px rgba(64, 158, 255, 0.2);
}

.avatar {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #f0f7ff;
}

.avatar-uploader-icon {
  width: 150px;
  height: 150px;
  font-size: 32px;
  color: #8c939d;
  background-color: #f5f7fa;
  border-radius: 50%;
}

.avatar-tip {
  margin-top: 12px;
  color: #606266;
  font-size: 14px;
  font-weight: 500;
}

.person-form {
  padding: 0 40px 30px;
}

.form-item {
  margin-bottom: 24px;
}

.form-input {
  border-radius: 8px;
  height: 42px;
  border-color: #e4e7ed;
  transition: border-color 0.3s;

  &:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }
}

.radio-group {
  display: flex;
  gap: 20px;
}

.radio-item {
  font-size: 15px;
  color: #303133;
}

.button-group {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.save-button {
  width: 180px;
  height: 45px;
  font-size: 16px;
  border-radius: 8px;
  background-color: #409eff;
  border: none;
  transition: all 0.3s;

  &:hover {
    background-color: #3391e8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  }
}
</style>